<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI告警信息中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        .header {
            background-color: #1976d2;
            color: white;
            padding: 1rem;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .alert-list {
            padding: 1rem;
        }

        .alert-item {
            background-color: white;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .alert-item div {
            margin: 0.5rem 0;
            display: flex;
            gap: 0.5rem;
        }

        .label {
            color: #666;
            min-width: 80px;
        }

        .value {
            flex: 1;
        }

        .alert-number {
            color: #1976d2;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>AI告警信息中心</h1>
    </header>

    <div class="alert-list">
        <div class="alert-item">
            <div>
                <span class="label">序号：</span>
                <span class="value alert-number">001</span>
            </div>
            <div>
                <span class="label">报警时间：</span>
                <span class="value">2024-01-10 14:30:00</span>
            </div>
            <div>
                <span class="label">联系方式：</span>
                <span class="value">13800138000</span>
            </div>
            <div>
                <span class="label">匹配结果：</span>
                <span class="value">异常行为检测：摄像头3发现可疑活动</span>
            </div>
        </div>

        <div class="alert-item">
            <div>
                <span class="label">序号：</span>
                <span class="value alert-number">002</span>
            </div>
            <div>
                <span class="label">报警时间：</span>
                <span class="value">2024-01-10 15:15:00</span>
            </div>
            <div>
                <span class="label">联系方式：</span>
                <span class="value">13900139000</span>
            </div>
            <div>
                <span class="label">匹配结果：</span>
                <span class="value">温度异常：设备A温度超过阈值</span>
            </div>
        </div>

        <div class="alert-item">
            <div>
                <span class="label">序号：</span>
                <span class="value alert-number">003</span>
            </div>
            <div>
                <span class="label">报警时间：</span>
                <span class="value">2024-01-10 16:00:00</span>
            </div>
            <div>
                <span class="label">联系方式：</span>
                <span class="value">13700137000</span>
            </div>
            <div>
                <span class="label">匹配结果：</span>
                <span class="value">系统告警：服务器负载过高</span>
            </div>
        </div>

        <div class="alert-item">
            <div>
                <span class="label">序号：</span>
                <span class="value alert-number">004</span>
            </div>
            <div>
                <span class="label">报警时间：</span>
                <span class="value">2024-01-10 16:45:00</span>
            </div>
            <div>
                <span class="label">联系方式：</span>
                <span class="value">13600136000</span>
            </div>
            <div>
                <span class="label">匹配结果：</span>
                <span class="value">人脸识别：检测到未授权人员进入</span>
            </div>
        </div>

        <div class="alert-item">
            <div>
                <span class="label">序号：</span>
                <span class="value alert-number">005</span>
            </div>
            <div>
                <span class="label">报警时间：</span>
                <span class="value">2024-01-10 17:20:00</span>
            </div>
            <div>
                <span class="label">联系方式：</span>
                <span class="value">13500135000</span>
            </div>
            <div>
                <span class="label">匹配结果：</span>
                <span class="value">设备异常：生产线2号机器停止运行</span>
            </div>
        </div>

        <div class="alert-item">
            <div>
                <span class="label">序号：</span>
                <span class="value alert-number">006</span>
            </div>
            <div>
                <span class="label">报警时间：</span>
                <span class="value">2024-01-10 18:00:00</span>
            </div>
            <div>
                <span class="label">联系方式：</span>
                <span class="value">13400134000</span>
            </div>
            <div>
                <span class="label">匹配结果：</span>
                <span class="value">环境监测：空气质量指数超标</span>
            </div>
        </div>

        <div class="alert-item">
            <div>
                <span class="label">序号：</span>
                <span class="value alert-number">007</span>
            </div>
            <div>
                <span class="label">报警时间：</span>
                <span class="value">2024-01-10 18:30:00</span>
            </div>
            <div>
                <span class="label">联系方式：</span>
                <span class="value">13300133000</span>
            </div>
            <div>
                <span class="label">匹配结果：</span>
                <span class="value">安全预警：检测到未经授权的系统访问</span>
            </div>
        </div>

        <div class="alert-item">
            <div>
                <span class="label">序号：</span>
                <span class="value alert-number">008</span>
            </div>
            <div>
                <span class="label">报警时间：</span>
                <span class="value">2024-01-10 19:15:00</span>
            </div>
            <div>
                <span class="label">联系方式：</span>
                <span class="value">13200132000</span>
            </div>
            <div>
                <span class="label">匹配结果：</span>
                <span class="value">能源监控：用电量突然激增</span>
            </div>
        </div>
    </div>
</body>
</html>